言葉でUIを生成する。VercelのジェネレーティブUI「v0」を触ってみた
v0とは
公式サイトには下記のように説明されていました。
AIを活用したVercelのジェネレーディブUIシステムです。
shadcn/uiとTailwind CSSに基づいて、コピー・ペーストしやすいReactコードを生成し、プロジェクトで使用できます。
例えば「ログインフォーム」などと入力するとReactで利用できるログインフォームのコンポーネントを生成してくれるシステムのようです。
利用するには
現在はprivate beta版でwaitlistに登録する必要があります。
私の場合は利用できるまでに約2ヶ月ほどかかりました。
下記のリンクからログイン、またはアカウントを作成し、実際にUIを生成しようと文言を入力し生成実行をすると、waitlistへの登録ボタンが表示されるのでそこから登録する流れとなります。
早速試してみる
今回は無料版で試していきます。その他のプランはこちらから確認できます。
また、今回試してみたものは下記のリンクから、利用例として実際に見ることができるのでぜひ興味のある方は見てみてください。
「クレジットカードの入力フォーム」を作成してみます。
「credit card entry form」と入力してEnter。
10秒ほど待つと画面下の部分に3つのコンポーネントが生成されました。
この中から一つを選択して細かな調整をしていく流れのようです。
他の候補はドロップダウンリストで生成されていました。
画面右上のCode ＜/＞をクリックするとReactのコードも確認できます。
後ほど実際にNext.jsのアプリに導入してみたいと思います。
部分的に修正をすることもできるようなので、Submitボタンに送信アイコンを追加してみます。
画面下のPick and editをクリックすると、要素を選択できるモードになるので修正したい部分をクリックし「add send icon」と入力してみます。
数秒待つといい感じに送信アイコンを追加してくれました。
次に背景色をカラーコードで指定してみます。
「change the background color to #9e9e9e」と入力してみます。
こちらもいい感じに対応してくれました。
言葉で命令するだけでなく、直接コードを修正することもできます。
次に、「convert to Japanese」と入力し日本語に変換することもできました。
ちなみに画面左には変更履歴が表示され一つ前の状態に戻すことなども可能です。
生成系では結果が「思ったのと違う。。」となることが時々あるのでこの機能はとてもありがたいです。
Next.jsに取り込む
実際にNext.jsのアプリに導入してみたいと思います。
方法は下記の2つがあります
1.コピー・ペーストする
コピー・ペーストする場合は、画面右上のCode ＜/ ＞をクリックするとReactで実装されたコードが表示されるので、そのままコピーしてReactのアプリケーションに貼り付けて利用します。
2. CLIで取り込む
CLIで取り込む方法を実際に試してみたいと思います。
まずは下記のコマンドでNext.jsのアプリケーションを作成します。
npx create-next-app@latest my-app --typescript --tailwind --eslint
v0をセットアップします。
npx v0@latest init
画面右上のCode ＜/ ＞をクリックしたときに表示されるコマンドを実行すると、Webで生成したコンポーネントがインストールされます。
npx v0 add Mzq5X9x7ED6
途中でコンポーネントの名前を何にするか聞かれたので「CreditCardForm」としました。
自動的にsrc/components配下にcredit-card-form.tsxが作成されました。
src/app/page.tsxでimportすると、localhostｍtのNext.jsアプリでも無事に表示することができました。
CLIではコマンドを実行するのとコンポーネント名を決めるだけでスムーズに取り込むことができました。
おわりに
VercelのUI生成システム「v0」を利用することで、デザイナーやエンジニアでなくても「〇〇な感じのデザインでUIを作成したい」といったときにすぐに形にできるのがとてもいいなと感じました。
また、実際のReactアプリケーションなどにもすぐに取り込むことができるCLIが便利でした。
公式のFAQによると、現在はReact(Tailwind)のみですが今後はSvelte、Vue、プレーンHTMLなどでもサポートする予定とのことです。
今後のアップデートにも注目していきたいと思います。
